<template>
	<view class="container">
			<view class="header">
				<!-- 设置圆角 -->
		 	<uni-search-bar :radius="100" @confirm="search" clearButton="auto" cancelButton="none"></uni-search-bar>
			</view>
			<view class="body">
				<!-- 轮播图 -->
				<uni-swiper-dot :info="info" :current="current" field="content" mode="round"
					selectedBackgroundColor="#000">
					<swiper class="swiper-box" @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="swiper-item">
				  		<image style="height: 120px;width: 100%;" src="../../static/tabbar/text.png"></image>
				  	</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<!-- 资讯模块 -->
				<uni-card title="推荐资讯" :is-shadow="false" :border = "false">
					<uni-row class="demo-uni-row">
						<uni-col v-for="(item ,index) in postForm" :key="index" style=" margin-top: 10px;">
							<image style="width: 160px;height: 140px; float: left;" :src="item.img"></image>
							<span>{{item.introduction}}</span>
							<div class="postReadNum"><span>阅读量：{{item.readNum}}</span></div>
						</uni-col>
					</uni-row>
				</uni-card>
			</view>
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				// mode: 'round',

				postForm: [{
					id: "1",
					img: "../../static/tabbar/text.png",
					introduction: "学习强国",
					readNum: "300"
				}, {
					id: "2",
					img: "../../static/tabbar/text.png",
					introduction: "考研上岸",
					readNum: "273"
				}, {
					id: "3",
					img: "../../static/tabbar/text.png",
					introduction: "四六级",
					readNum: "132"
				}, {
					id: "4",
					img: "../../static/tabbar/text.png",
					introduction: "含金量高的比赛",
					readNum: "78"
				}]
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		background-color: #F7F7F7;
	}

	.postReadNum {
		display: table-cell;
		vertical-align: middle;
		line-height: 50px;
	}
</style>
